<template>
  <div>
      <operate :width="width" :height="height" class="operate-p"></operate>
      <fabric :width="width" :height="height" ref="fabric" class="fabric-p"></fabric>
      <pannel class="pannel-p"></pannel>
  </div>
</template>

<script>

import operate from './module/operate.vue'
import fabric from './module/fabric.vue'
import pannel from './module/pannel.vue'
export default {
 
  components: {
     operate, fabric, pannel
  },
  props: {
      width: Number,
        height: Number
  },
  data(){
    return {
    
    
     
    }
  },
  methods: {
    toJSON(){
       return this.$refs.fabric.toJSON()
    }, 
    loadFromJSON(json){
       this.$refs.fabric.loadFromJSON(json)
    }
  },
  mounted(){
  
  }
}
</script>
<style scoped>
.operate-p{
  display: inline-block; vertical-align: top;
  width: 410px;
}
.fabric-p{
   display: inline-block; vertical-align: top;
   border: 1px solid #ededed;
}
.pannel-p{
   display: inline-block; vertical-align: top;
  
}
</style>